<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/res/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/res/frame/static/css/style.css">
    <link rel="icon" href="/res/frame/static/image/code.png">
</head>
<body class="body">

<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <div class="layui-colla-content layui-show">
                <div id="main-line" style="height: 300px;"></div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="/res/frame/layui/layui.js"></script>
<script type="text/javascript" src="/res/js/index.js"></script>
<script type="text/javascript" src="/res/frame/echarts/echarts.min.js"></script>
<script src="/lib/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="/res/frame/layui/layui.js"></script>
<script type="text/javascript" src="/res/frame/static/js/vip_comm.js"></script>
<script type="text/javascript">
    layui.use(['table', 'form', 'layer', 'vip_table', 'cookie', 'laydate'], function () {

        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTable = layui.vip_table
            , $ = layui.jquery,
            cookie = layui.cookie,
            laydate = layui.laydate;


        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main-line'));
        // 使用刚指定的配置项和数据显示图表。
        var option = null;
        initData();

        function initData() {
            var x = [];
            var Y1 = [];
            var Y2 = [];
            $.ajax({
                url: '/port/selectListList?pkId=' + GetQueryString("pkId"),
                type: "get",
                contentType: "application/json",
                async: false,
                success: function (result) {
                    var z = result.data;
                    console.log(z);
                    $.each(result.data, function (i, value) {
                        x.push(value.spCreateDate);
                        Y2.push(value.spInSpeed);
                        Y1.push(value.spOutSpeed);
                    })

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.responseText);

                }
            });

            option = {
                title: {
                    text: '网速(m/s)'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['出网网速','入网网速']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    name: 'x',
                    splitLine: {show: false},
                    data: x
                },
                yAxis: {
                    type: 'log',
                    name: 'y'
                },
                series: [
                    {
                        name:'入网网速',
                        type:'line',
                        data:Y2
                    },
                    {
                        name:'出网网速',
                        type:'line',
                        data:Y1
                    }
                ]
            };
            myChart.setOption(option, true)
        };
        setInterval(function () {
            initData();
        }, 20000);
    })
    ;


</script>
</body>
</html>